<!--
* @description 建筑防火单元
!-->
<template>
  <div class="build-fire-protect-unit-wrap" >
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-show="deductNum > 0" >{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="model-title content-card">
          <el-row>
            <el-col :span="3">
              <img class="model-title-icon" :src="fireEscape.icon">
            </el-col>
            <el-col :span="21">
              <p class="model-title-name">
                <span>{{fireEscape.name}}</span>
                <span class="model-title-points-num" v-if="fireEscape.deduct > 0">{{'-' + fireEscape.deduct}}</span>
              </p>
              <p class="model-title-desc">{{fireEscape.title}}</p>
            </el-col>
          </el-row>
        </div>
        <div class="model-content content-card">
          <el-carousel v-if="fireEscape.deductDetails && fireEscape.deductDetails.length > 0" class="fire-escape-wrap" height="269px" arrow="never" :class="{'one-carousel-item': fireEscape.deductDetails && fireEscape.deductDetails.length.length == 1}" :autoplay=false>
            <el-carousel-item v-for="(item, index) in fireEscape.deductDetails" :key="index">
              <el-row>
                <el-col :span="11">
                  <el-image v-if="item.picUrl" class="fire-escape-img" @click="$imgPreview" :src="item.picUrl" :data-imgpreview="item.picUrl.split(',')" fit="cover" alt="无人值守图片"></el-image>
                </el-col>
                <el-col :span="12">
                  <p class="fire-escape-name">{{item.name}}</p>
                  <p class="fire-escape-status" :class="statusClassMap(item.fireTType)">{{item.fireTTypeName}}<span class="" v-if="item.deduct > 0">{{'-' + item.deduct}}</span></p>
                  <p class="fire-escape-time">已持续{{item.keepTime}}</p>
                  <el-link type="primary" @click="openVideo(item)">查看监控</el-link>
                </el-col>
                <el-col :span="1"></el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
          <div v-else class="no-data">
            <p class="no-data-text">消防车通道视频分析未实行</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="model-title content-card">
          <el-row>
            <el-col :span="6">
              <img class="model-title-icon" :src="buildMaterials.icon">
            </el-col>    
            <el-col :span="18">
              <p class="model-title-name">
                <span>{{buildMaterials.name}}</span>
                <span class="model-title-points-num" v-if="buildMaterials.deduct > 0">{{'-' + buildMaterials.deduct}}</span>
              </p>
              <p class="model-title-desc">
                <span>{{buildMaterials.title}}</span>
                <span style="float: right;color: rgb(194, 198, 214);">{{buildMaterials.remarks}}</span>
              </p>
            </el-col>
          </el-row>
        </div>
        <div class="model-content content-card">
          <div v-for="(item,i) in buildMaterials.deductDetails" class="content-card-buildStuff" v-show="currentPageIndex==i+1" :key="i">
            <div class="content-card-buildStuff-status">
              <div v-if="item.categoryName"  class="content-card-buildStuff-status-left">{{item.categoryName}}</div>
              <div v-if="item.continueTimeStr" class="content-card-buildStuff-status-right" :class="{'bg-color-1': item.continueTimeStr == '超期'}">{{item.continueTimeStr}}</div>
            </div>
            <div class="content-card-buildStuff-desc"><p>{{item.hiddenDangerDesc}}</p><span style="color: #FD5E5E;">-{{item.deduct}}</span></div>
            <div class="content-card-buildStuff-statusmore"><span>{{item.gradeName}}</span><span style="padding-left: 15px;">{{item.status==1?"整改中":(item.status==2?"已完成":"审核中")}}</span></div>
            <div class="content-card-buildStuff-pics" v-if="item.picUrls"><el-image fit="cover" v-for="(srcItem,index) in item.picUrls.split(',')" alt="图片" :src="srcItem" :key="index"  @click="$imgPreview" :data-imgpreview="item.picUrls" :data-imgpreviewindex="index"></el-image></div>
          </div>
          <el-pagination
            v-if="currentPageTotal!=0"
            style="text-align: right;"
            background
            @current-change="pageChange"
            :current-page="currentPageIndex"
            :page-size="1"
            :total="currentPageTotal"
            layout="pager">
          </el-pagination>
          <div v-else class="no-data">
            <p class="no-data-text">当前无建筑材料隐患</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'
import util from '@/utils/util'

export default {
  name: 'FacUnit',
  props: {
    orgId: {
        required: true
    },
    safetyRecordId: {
        required: true
    },
    groupId: {
        required: true
    },
  },
  data () {
    return {
      groupName: '',
      desc: '',
      deductNum: '',
      fireEscape: {}, // 消防通道占用信息
      buildMaterials: {}, // 建筑材料隐患信息
      currentPageIndex:1,
      currentPageTotal: 0,
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId
      }
      getSafetyGroup(parames).then(res => {
        if(res.status === 200) {
          that.groupName = res.data.groupName || '建筑防火单元'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          for(var i=0, len=res.data.details.length; i < len; i++) {
            if(res.data.details[i].objId == 11) {
              that.fireEscape = res.data.details[i]
            } else if (res.data.details[i].objId == 12) {
              that.buildMaterials = res.data.details[i]
              that.currentPageTotal = that.buildMaterials.deductDetails.length
            }
          }
        }
      })
    },
    pageChange(val) {//翻页
      this.currentPageIndex = val;
    },
    statusMap(id) {
      const FIRETYPEMAP = {
        '0': '正常',
        '10': '报警',
        '20': '故障',
        '30': '联动',
        '40': '屏蔽',
      }

      return FIRETYPEMAP[id] || '无'
    },
    statusClassMap(id) {
      const FIRETYPECLASSMAP = {
        '0': 'color-3',
        '10': 'color-1',
        '20': 'color-2',
        '30': 'color-5',
        '40': 'color-8',
      }

      return FIRETYPECLASSMAP[id] || 'color-4'
    },
    // 查看监控
    openVideo(data) {
      util.rowShowVedio({
        fcFacilitiesId:data.fcfId || '',
        organizationId:data.orgId || this.$store.state.userinfo.org.id,
        serverId:''
      })
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.build-fire-protect-unit-wrap {
  width: 1200px;
  .model-content {
    margin-top: 0;
    border-top: none;
  }
  .content-card-buildStuff-status {
    .bg-color-1 {
      background-color: #FD5E5E;
    }
  }
}
</style>
